@import './pagination-arrow.styl'

#bannerSwiper
	.swiper-wrapper
		.swiper-slide
			img
				display:block;
				width:100%;
	.swiper-pagination
		.swiper-pagination-bullet
			width: 30px;
			height: 5px;
			border-radius: 5px;
			background: #c2c6c9;
			opacity:1;
			vertical-align:middle;
		.swiper-pagination-bullet-active
			background:#b02323;
			height:8px;
	.slideButtonBox
		position:absolute;
		width:$center-w;
		height:100px;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		z-index:1;
		opacity:0;
		transition:all 0.4s ease;
		.swiper-button-white
			width: 60px
			height: 60px
			background: transparent
			&.swiper-button-next
				transform: rotate(180deg)
			.pagination-arrow-wrap
				width: 60px
				height: 60px
				.pagination-arrow
					polygon, polyline
						stroke: #fff
						stroke-width: 2
						fill: none
	&:hover
		.slideButtonBox
			opacity:1;